<template>
  <my-container>
    <template #header>
      <el-form class="ad-form-query" :inline="true" :model="filter" @submit.native.prevent>
        <el-form-item label=" 用户名:">
          <el-input
            v-model="filter.userName"
            placeholder="操作账号"
            clearable
            @keyup.enter.native="onSearch"
          >
            <template #prefix>
              <i class="el-input__icon el-icon-search" />
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="类型:">
          <el-select v-model="filter.type" :clearable="false" placeholder="请选择日志类型">
            <el-option label="全部类型" value="-1" />
            <el-option label="操作日志" value="0" />
            <el-option label="登录日志" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="warning" icon="el-icon-search" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </template>

    <el-table
      v-loading="listLoading"
      :data="list"
      highlight-current-row
      border
      :header-cell-style="{background:'#f9f9f9'}"
    >
      <el-table-column type="index" width="80" label="#" />
      <el-table-column prop="userName" label="操作账号" width="120" />
      <el-table-column prop="operation" label="操作" width="250" />
      <el-table-column prop="apiUrl" label="操作接口" width="350" />
      <el-table-column prop="browser" label="浏览器" width="250">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            width="300"
            trigger="hover"
          >
            <div>{{ scope.row.browser }}</div>
            <span slot="reference">{{
              scope.row.browser.substr(0, 30) + "..."
            }}</span>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="ip" label="IP" />

      <el-table-column prop="elapsedMilliseconds" label="耗时(毫秒)" width="100" />
      <el-table-column prop="result" label="操作状态" width="100">
        <template #default="{row}">
          <el-tag
            :type="row.result ? 'success' : 'danger'"
            disable-transitions
          >{{ row.result ? '成功' : '失败' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="message" label="操作消息" />
      <el-table-column prop="createTime" label="操作时间" :formatter="formatCreatedTime" width />
    </el-table>

    <my-pagination
      ref="pager"
      :total="total"
      @get-page="getList"
    />

  </my-container>
</template>

<script>
import { formatTime } from '@/utils'
import { getLogList } from '@/api/admin/log'
import MyContainer from '@/components/my-container'

export default {
  name: 'SysLog',
  components: { MyContainer },
  data() {
    return {
      filter: {
        userName: '',
        type: '-1'
      },
      list: [],
      selectRole: [],
      total: 0,
      listLoading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    formatCreatedTime: function(row, column, time) {
      return formatTime(time, 'YYYY-MM-DD HH:mm')
    },
    onSearch() {
      this.$refs.pager.setPage(1)
      this.getList()
    },
    // 获取列表
    async getList() {
      const pager = this.$refs.pager.getPager()
      const para = {
        ...pager,
        userName: this.filter.userName,
        type: this.filter.type
      }
      this.listLoading = true
      const res = await getLogList(para)
      this.listLoading = false

      if (!res?.success) {
        return
      }

      this.total = res.data.totalCount
      this.list = res.data.rows
    }
  }
}
</script>
